@use '../../token/breakpoint';
@use '../../token/colors';
@use '../../token/size';

$jhlite-landscape-padding: 20px;
$jhipster-landscape-preset-selection-top-position: 85px;
$jhipster-landscape-preset-selection-left-position: $jhlite-landscape-padding;
$jhlite-landscape-line-color: colors.$jhlite-global-line-color;
$jhlite-landscape-box-radius: colors.$jhlite-global-box-radius;
$jhlite-landscape-primary-color: colors.$jhlite-global-primary-color;
$jhlite-landscape-color-text-light: colors.$jhlite-global-color-text-light;
$jhlite-landscape-selectable-highlight-animation: colors.$jhlite-global-selectable-highlight-animation;
$jhlite-landscape-not-selectable-highlight-animation: colors.$jhlite-global-not-selectable-highlight-animation;
$jhlite-landscape-valid-highlight-end-color: colors.$jhlite-global-valid-highlight-end-color;
$jhlite-landscape-primary-alternative-color: colors.$jhlite-global-primary-alternative-color;

.jhipster-landscape,
.jhlite-landscape-minimap {
  .jhipster-landscape-map {
    position: relative;
    padding: $jhlite-landscape-padding;
  }

  .jhipster-landscape-modes-selection {
    position: absolute;
    top: $jhlite-landscape-padding;
    left: $jhlite-landscape-padding;
    z-index: 3;
    border: 1px dotted $jhlite-landscape-line-color;
    border-radius: $jhlite-landscape-box-radius;
    background: var(--jhlite-chip-bg-color);
    padding: 10px;
  }

  .jhipster-landscape-preset-selection {
    position: absolute;
    top: $jhipster-landscape-preset-selection-top-position;
    left: $jhipster-landscape-preset-selection-left-position;
    z-index: 3;
    background: var(--jhlite-chip-bg-color);
  }

  .jhipster-landscape-content {
    &--header {
      display: none;
    }
  }

  .jhipster-landscape-search-container {
    display: flex;
    flex-grow: 1;
    justify-content: center;
  }

  .jhipster-landscape-search {
    display: flex;
    align-items: center;
    border-radius: size.$jhlite-global-size-field-radius;
    box-shadow: 0 2px 10px rgb(0 0 0 / 10%);
    padding: 10px;
  }

  .jhipster-landscape-connectors {
    position: absolute;
    top: $jhlite-landscape-padding;
    left: $jhlite-landscape-padding;
    z-index: 1;

    &--line {
      stroke: $jhlite-landscape-line-color;
      stroke-opacity: 0.7;
      stroke-width: 1px;
      stroke-dasharray: 2 2;
      fill: none;

      &.-selectable-highlighted,
      &.-not-selectable-highlighted,
      &.-highlighted-unselection,
      &.-selected {
        stroke-dasharray: none;
        stroke-width: 3px;
        stroke-opacity: 1;
      }

      &.-selected {
        stroke: $jhlite-landscape-primary-color;
      }

      &.-selectable-highlighted {
        animation: $jhlite-landscape-selectable-highlight-animation;
      }

      &.-not-selectable-highlighted,
      &.-highlighted-unselection {
        animation: $jhlite-landscape-not-selectable-highlight-animation;
      }
    }
  }

  .jhipster-landscape-levels {
    display: grid;
    position: relative;
    column-gap: 15px;
    place-items: center;
    z-index: 2;

    &--level {
      grid-row: 1;
      padding: 0;

      &.-compacted {
        margin-right: 20px;
        min-width: 150px;
      }

      &.-extended {
        margin-right: 30px;
        min-width: 250px;
      }
    }
  }

  .jhipster-landscape-feature {
    border: 2px dotted $jhlite-landscape-line-color;
    border-radius: $jhlite-landscape-box-radius;
    background: rgba($color: $jhlite-landscape-primary-alternative-color, $alpha: 30%);

    &--title {
      text-align: center;
      color: var(--jhlite-global-color-text);
      font-size: 1em;
      font-weight: bold;

      &.-extended {
        margin: 5px;
      }

      &.-compacted {
        margin: 1px 3px;
      }
    }

    &--modules {
      padding: 0;
    }

    &--module {
      list-style-type: none;
    }

    &.-extended {
      padding: 10px 5px 0;
    }

    &.-compacted {
      padding: 1px 3px 0;
    }

    &.-selectable-highlighted {
      animation: $jhlite-landscape-selectable-highlight-animation;
      color: $jhlite-landscape-color-text-light;
    }

    &.-not-selectable-highlighted,
    &.-highlighted-unselection {
      animation: $jhlite-landscape-not-selectable-highlight-animation;
      color: $jhlite-landscape-color-text-light;
    }
  }

  .jhipster-landscape-element {
    list-style-type: none;

    &.-compacted {
      margin-bottom: 5px;
    }

    &.-extended {
      margin-bottom: 15px;
    }
  }

  .-search-highlighted {
    border-radius: size.$jhlite-global-size-field-radius;
    box-shadow: 0 0 0 size.$jhlite-global-size-field-border-focus colors.$jhlite-attention-highlight-color;
  }
}

.jhipster-landscape {
  position: relative;
}

@media screen and (min-width: breakpoint.$jhlite-global-breakpoint-small-medium) {
  .jhipster-landscape {
    .jhipster-landscape-content {
      display: flex;
      flex-direction: column;
      height: 100%;

      &--header {
        display: flex;
        align-items: center;
        padding: 20px 0;
      }

      &--modules {
        display: flex;
        flex-grow: 1;
        min-height: 0;
        overflow: auto;
      }
    }
  }
}
